<script lang="ts" setup>
import 'element-plus/dist/index.css'
import { reactive } from 'vue'
// const onvalue = ref([])
// const offvalue = ref([])

const form = reactive({
  task: '将110kV流沙站10kV流沙线abc 1T1开关至10T1开关段线路转由110kV西南站10kV西南线cba供电',
  onDevice: '110kV流沙站10kV流沙线abc 1T1开关',
  onDevicetype:[],
  offDevice: '110kV西南站10kV西南线abc 19T1开关',
  offDevicetype:[],
  onauto: false,
  offauto: false,
})
const onSubmit = async () => {
  void localSupplytask.setValue(form.task);
  void localSupplyonDevice.setValue(form.onDevice);
  void localSupplyoffDevice.setValue(form.offDevice);
  void localSupplyonDevicetype.setValue(toRaw(form.onDevicetype));
  void localSupplyoffDevicetype.setValue(toRaw(form.offDevicetype));
  void localSupplyonauto.setValue(form.onauto);
  void localSupplyoffauto.setValue(form.offauto);

    TPS_Output(form.task,form.onDevice,form.onDevicetype,form.offDevice,form.offDevicetype,form.onauto,form.offauto);
}
const onClean = () => {
    form.task='';
    form.onDevice='';
    form.offDevice='';
    form.onDevicetype=[];
    form.offDevicetype=[];
    form.onauto=false;
    form.offauto=false;
}
const onReload= async () => {
    form.task=await localSupplytask.getValue();
    form.onDevice=await localSupplyonDevice.getValue();
    form.offDevice=await localSupplyoffDevice.getValue();
    form.onDevicetype=await localSupplyonDevicetype.getValue();
    form.offDevicetype=await localSupplyoffDevicetype.getValue();
    form.onauto=await localSupplyonauto.getValue();
    form.offauto=await localSupplyoffauto.getValue();
}

const options = [
    {
    value: '柱上开关',
    label: '柱上开关',
    children: [
    {
        value: 0,
        label: '无需操作刀闸',
      },
      {
        value: 1,
        label: '单刀闸',
      },
      {
        value: 2,
        label: '双刀闸',
      },
    ],
  },
  {
    value: '电缆分接箱',
    label: '电缆分接箱',
    children: [
      {
        value: 0,
        label: '无刀闸',
      },
      {
        value: 1,
        label: '有刀闸',
      },
    ],
  },
]
const props = {
  expandTrigger: 'hover' as const,
}
const handleChange = (value) => {
  console.log(value)
}
const rules=reactive({
    onDevice:[
        {required:true,pattern:/([0-9]+T[0-9])|(箱\s*(\w+)\s*开关)/,message:'请输入合环开关编号',trigger:'blur'},
    ],
    offDevice:[
        {required:true,pattern:/([0-9]+T[0-9])|(箱\s*(\w+)\s*开关)/,message:'请输入解环开关编号',trigger:'blur'}     
    ],
})
let onrule=toRaw(form.onDevicetype)[0]=='电缆分接箱'? 'BoxDevice':'SwitchDevice';
let offrule=toRaw(form.offDevicetype)[0]=='电缆分接箱'? 'BoxDevice':'SwitchDevice';
</script>
<template>
    <el-form :model="form" :rules="rules" size="small" label-position="left" label-width="auto" >
        <el-form-item label="操作任务：">
            <el-input type="textarea" v-model="form.task" autosize  placeholder="将110kVXX站10kVXX线abc 1T1开关至10T1开关段线路转由110kVXX站10kVXX线cba供电"/>
        </el-form-item>
        <el-divider />
        <el-form-item label="合环点设备类型：">
            <el-cascader
                v-model="form.onDevicetype"
                :options="options"
                :props="props"
                :teleported="false"
                @change="handleChange"
            />
        </el-form-item>
        <el-form-item label="合环点设备名称：" :prop="onDevice">
            <el-input v-model="form.onDevice" autosize spellcheck="false"/>
        </el-form-item>
        <el-form-item label="合环自动化开关 ">
            <el-switch v-model="form.onauto" />
        </el-form-item>
        <el-divider />
        <el-form-item label="解环点设备类型：">
            <el-cascader
                v-model="form.offDevicetype"
                :options="options"
                :props="props"
                :teleported="false"
                @change="handleChange"
            />
        </el-form-item>
        <el-form-item label="解环点设备名称：" :prop="offDevice" >
            <el-input  v-model="form.offDevice" spellcheck="false" />
        </el-form-item>
        <el-form-item label="解环自动化开关 ">
            <el-switch v-model="form.offauto" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit">生成操作票</el-button>
          <el-button type="danger" @click="onClean">清空参数</el-button>
          <el-button type="primary" @click="onReload">加载上次参数</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>
</style>